ARIA: aria-required-Attribut

Das aria-required-Attribut gibt an, dass Benutzereingaben im Element erforderlich sind, bevor ein Formular abgesendet werden kann.

Beschreibung

Wenn ein semantisches HTML-<input>, <select> oder <textarea> einen Wert haben muss, sollte das required-Attribut darauf angewendet werden. Das HTML-required-Attribut verhindert das Absenden des Formulars, solange die erforderlichen Formularelemente keine gültigen Werte haben, und stellt sicher, dass Benutzer, die mit Hilfe von unterstützenden Technologien navigieren, verstehen, welche semantischen Formularelemente gültige Inhalte benötigen.

Wenn Formularelemente mit nicht-semantischen Elementen erstellt werden, wie z.B. einem <div> mit einer role von checkbox, sollte das aria-required-Attribut mit einem Wert von true hinzugefügt werden, um unterstützenden Technologien mitzuteilen, dass Benutzereingaben im Element erforderlich sind, damit das Formular abgesendet werden kann. Das aria-required-Attribut kann mit HTML-Formularelementen verwendet werden und ist nicht auf Elemente beschränkt, denen eine ARIA-Rolle zugewiesen wurde.

Ähnlich dem auf semantische HTML-Formularelemente angewendeten HTML-required-Attribut vermittelt das aria-required-Attribut ausdrücklich unterstützenden Technologien, dass das Element erforderlich ist, bevor ein Formular abgesendet werden kann. Das required-Attribut auf einem semantischen HTML-Formularsteuerungselement verhindert, dass das Formularelement abgesendet wird, wenn kein Wert vorhanden ist — und bietet in einigen Browsern native Fehlermeldungen, wenn ein erforderlicher Wert ungültig ist, wenn der Benutzer versucht, das Formular abzusenden. Das aria-required-Attribut hat, wie alle ARIA-Zustände und -Eigenschaften, keinen Einfluss auf die Funktionalität des Elements. Funktionalität und Verhalten müssen mit JavaScript hinzugefügt werden.

Hinweis: ARIA modifiziert nur den Accessibility Tree und ändert, wie unterstützende Technologie Inhalte Benutzern präsentiert. ARIA ändert nichts am Funktionsumfang oder Verhalten eines Elements. Wenn keine semantischen HTML-Elemente für ihren vorgesehenen Zweck und ihre Standardfunktionalität verwendet werden, müssen Sie JavaScript verwenden, um Verhalten, Fokus und ARIA-Zustände zu verwalten.

Die CSS-Pseudoklassen :required und :optional stimmen überein mit <input>, <select>, und <textarea>-Elementen, basierend darauf, ob sie erforderlich oder optional sind. Wenn nicht-semantische Elemente als Formularelemente verwendet werden, erhalten Sie diesen CSS-Pseudoklassen-Selektorvorteil nicht. Sie können jedoch Attributselektoren verwenden, wenn das Attribut vorhanden ist: [aria-required="true"] oder [aria-required="false"].

Wenn ein Formular sowohl erforderliche als auch optionale Formularelemente enthält, sollten die erforderlichen Elemente visuell kenntlich gemacht werden, indem eine Gestaltung erfolgt, die nicht ausschließlich auf Farbe angewiesen ist, um Bedeutung zu vermitteln. Typischerweise werden beschreibender Text und/oder ein Symbol verwendet.

Hinweis: Welche Elemente erforderlich sind, sollte für alle Benutzer offensichtlich sein. Stellen Sie sicher, dass die visuelle Darstellung in einer konsistenten, sichtbaren Weise anzeigt, dass das Formularelement erforderlich ist, und denken Sie daran, dass Farbe allein nicht ausreicht, um Informationen zu vermitteln.

Beispiele

Das Attribut sollte der Rolle der Formularsteuerung hinzugefügt werden. Wenn der Benutzer eine E-Mail-Adresse im textbox eingeben muss, fügen Sie aria-required="true" zum Textfeld hinzu.

html

<div id="tbLabel">Email Address *</div>
<div
  role="textbox"
  contenteditable
  aria-labelledby="tblabel"
  aria-required="true"
  id="email1"></div>

Hinweis: Wenn das Label des Feldes bereits das Wort "erforderlich" enthält, wird empfohlen, das aria-required-Attribut auszulassen. Dadurch wird vermieden, dass Screenreader das Wort "erforderlich" doppelt ausgeben.

In diesem Beispiel muss JavaScript verwendet werden, um zu verhindern, dass das enthaltene Formular abgesendet wird, wenn das Textfeld keinen Inhalt hat.

Dies könnte semantisch geschrieben werden, ohne die Notwendigkeit von JavaScript:

html

<label for="email1">Email Address (required)</label>
<input type="email" id="email1" required />

Werte

true: Das Element erfordert einen Wert oder muss für die Absendung des Formulars überprüft werden.
false: Das Element ist nicht erforderlich.

Zugehörige Schnittstellen

Element.ariaRequired: Die ariaRequired-Eigenschaft, Teil der Element-Schnittstelle, spiegelt den Wert des aria-required-Attributs wider.
ElementInternals.ariaRequired: Die ariaRequired-Eigenschaft, Teil der ElementInternals-Schnittstelle, spiegelt den Wert des aria-required-Attributs wider.

Zugehörige Rollen

Verwendet in Rollen:

Vererbt in Rollen:

Spezifikationen

Specification
Accessible Rich Internet Applications (WAI-ARIA) # aria-required